<template>
  <div ref="EcharRef" id="echarPie" style="width: 100%; height: 100%"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { debounce } from "./mixins/debounce";
export default defineComponent({
  setup(props: any) {
    // echart节点
    const charts = ref<HTMLElement | null>(null);
    onMounted(() => {
      // 获取节点
      const myChart = echarts.init(
        document.getElementById("echarPie") as HTMLElement
      );
      myChart.setOption({
        backgroundColor: "transparent",
        color: [
          "#0167e1",
          "#814ec2",
          "#504ac7",
          "#ff5027",
          "#173cde",
          "#e69f15",
          "#409eff",
          "#ff5027",
          "#cdb477",
          "#bc4287",
        ],
        grid: {
          top: "50%",
          left: "0%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                width: 58,
                height: 58,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },

        toolbox: {
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            top: "20px",
            clockWise: false,
            radius: [60, 76],
            hoverAnimation: true,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: "#ddd",
                },
                labelLine: {
                  length: 5,
                  length2: 40,
                  show: true,
                  color: "#00ffff",
                },
              },
            },
            data: [
              { name: "态势", value: 87 },
              { name: "智库", value: 63 },
              { name: "新闻", value: 295 },
              { name: "社交媒体", value: 83 },
              { name: "舰船", value: 105 },
              { name: "其他", value: 7 },
            ],
          },
        ],
      });
      window.addEventListener('resize',debounce(() => {
        myChart.resize();
      }))
    });
    return {
      charts,
    };
  },
});
</script>
